<template>
  <div class="Footer-main">
    <!-- 版心 -->
    <div class="Footer">
      <!-- 顶部 -->
      <div class="Footer-top">
        <!-- 下载QQ音乐客户端 -->
        <div class="Footer-body">
          <h3>下载QQ音乐客户端</h3>
          <ul class="footer_download">
            <li>
              <a class="PC"></a>
              <span>PC版</span>
            </li>
            <li>
              <a class="Mac"></a>
              <span>Mac版</span>
            </li>
            <li>
              <a class="Android"></a>
              <span>Android版</span>
            </li>
            <li>
              <a class="iphone"></a>
              <span>iPhone版</span>
            </li>
          </ul>
        </div>
        <!-- 特色产品 -->
        <div class="Footer-body">
          <h3>特色产品</h3>
          <ul class="footer_product">
            <li>
              <a class="KTV" href="#"></a>
              <span>全民K歌</span>
            </li>
            <li>
              <a class="MilkyWay" href="#"></a>
              <span>银河音效</span>
            </li>
            <li>
              <a class="QPlay" href="#"></a>
              <span>QPlay</span>
            </li>
            <li>
              <a class="Fan" href="#"></a>
              <span>Fan直播伴侣</span>
            </li>
            <li>车载互联</li>
            <li>QQ演出</li>
          </ul>
        </div>
        <!-- 合作链接 -->
        <div class="Footer-body">
          <h3>合作链接</h3>
          <ul class="footer_link">
            <li class="footer_link_list__item">CJ ENM</li>
            <li class="footer_link_list__item">腾讯视频</li>
            <li class="footer_link_list__item">手机QQ空间</li>
            <li class="footer_link_list__item">最新版QQ</li>
            <li class="footer_link_list__item">腾讯社交广告</li>
            <li class="footer_link_list__item">电脑管家</li>
            <li class="footer_link_list__item">QQ浏览器</li>
            <li class="footer_link_list__item">腾讯微云</li>
            <li class="footer_link_list__item">腾讯云</li>
            <li class="footer_link_list__item">企鹅FM</li>
            <li class="footer_link_list__item">智能电视网</li>
            <li class="footer_link_list__item">当贝市场</li>
            <li class="footer_link_list__item">酷我音乐</li>
            <li class="footer_link_list__item">酷狗听书</li>
          </ul>
        </div>
        <!-- 开放平台  -->
        <div class="Footer-open Footer-body">
          <h3>开放平台</h3>
          <ul>
            <li>QQ音乐开放平台</li>
            <li>腾讯音乐人</li>
            <li>音乐推</li>
          </ul>
        </div>
        <!-- TME集团官网 -->
        <div class="Footer-TME Footer-body">
          <h3>TME集团官网</h3>
          <ul>
            <li>腾讯音乐</li>
          </ul>
        </div>
      </div>

      <!-- 服务条款 -->
      <div class="footer_copyright">
        <div>
          关于腾讯 |About Tencent |服务条款 |用户服务协议 |隐私政策 |权利声明
          |广告服务 |腾讯招聘 |客服中心 |网站导航 |举报中心
        </div>
        <div>Copyright © 1998 - 2022 Tencent. All Rights Reserved.</div>
        <div>
          腾讯公司
          版权所有｜营业执照｜网络文化经营许可证：粤网文[2020]3396-195号｜客服电话：4006016666｜违法与不良信息举报邮箱：tme_musicjubao@tencentmusic.com
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
}
</script>

<script setup></script>

<style scoped lang="less">
.Footer-main {
  width: 100%;
  height: 100%;
  background-color: green;
  font-size: 15px;
  color: #999;
  background-color: rgb(51, 51, 51);
  .Footer {
    max-width: 1200px;
    margin: 0 auto;
    .Footer-top {
      padding: 80px 0 45px 0;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .Footer-body {
        h3 {
          padding-bottom: 30px;
          font-size: 15px;
          font-weight: 400;
        }
        ul {
          overflow: hidden;
          li {
            float: left;
            min-width: 90px;
            margin-bottom: 15px;
            .footer_link_list__item {
              display: block;
              min-width: 100px;
              margin-bottom: 12px;
            }
          }
        }
        .footer_download {
          width: 360px;
          // hover -49px
          .PC {
            display: block;
            background-image: url('@/assets/image/footer.png');
            width: 37px;
            background-position: -2px 0;
            background-size: 830px;
            width: 48px;
            height: 48px;
          }
          .Mac {
            display: block;
            background-image: url('@/assets/image/footer.png');
            width: 37px;
            background-position: -95px 0px;
            background-size: 830px;
            width: 48px;
            height: 48px;
          }
          .Android {
            display: block;
            background-image: url('@/assets/image/footer.png');
            width: 37px;
            background-position: -190px 0px;
            background-size: 830px;
            width: 48px;
            height: 48px;
          }
          .iphone {
            display: block;
            background-image: url('@/assets/image/footer.png');
            width: 37px;
            background-position: -279px 0px;
            background-size: 830px;
            width: 48px;
            height: 48px;
          }
          li:hover a {
            background-position-y: -53px;
          }
          li:hover span {
            color: green;
          }
        }
        .footer_product {
          text-align: center;
          width: 360px;
          .KTV {
            margin: 5px auto;
            display: block;
            background-image: url('@/assets/image/footer.png');
            width: 37px;
            background-position: -380px 0px;
            background-size: 830px;
            width: 48px;
            height: 48px;
          }
          .MilkyWay {
            margin: 5px auto;
            display: block;
            background-image: url('@/assets/image/footer.png');
            width: 37px;
            background-position: -475px 0px;
            background-size: 830px;
            width: 48px;
            height: 48px;
          }
          .QPlay {
            margin: 5px auto;
            display: block;
            background-image: url('@/assets/image/footer.png');
            width: 37px;
            background-position: -580px 0px;
            background-size: 830px;
            width: 48px;
            height: 48px;
          }
          .Fan {
            margin: 5px auto;
            display: block;
            background-image: url('@/assets/image/footer.png');
            width: 37px;
            background-position: -670px 0px;
            background-size: 830px;
            width: 48px;
            height: 48px;
          }
          li:hover a {
            background-position-y: -53px;
          }
          li:hover span {
            color: green;
          }
        }
        .footer_link {
          width: 300px;
        }
      }
      .Footer-open {
        width: 38%;
        li {
          margin-right: 20px;
        }
      }
      .Footer-TME {
        flex: 1;
        width: 30%;
      }
    }
    .footer_copyright {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      div {
        display: flex;
        align-content: center;
        justify-content: center;
      }
    }
  }
}
</style>
